<template>
  <div>
    <div class="homeBox">
      <div class="tapContent">
        <div class="leftInstrument baseStyle">
          <div class="in-line">
            <div class="topLightBox">
              <div class="topLignt">
                <span class="lightgreen"></span>
                <span>开机数 : {{startNum}}</span>
              </div>
              <div class="topLignt">
                <span class="lightgreen redBox"></span>
                <span>停机数 : {{endNum}}</span>
              </div>
            </div>
            <div class="botLightBox">
              <span class="lightblue"></span>
              <span>样本数 : {{samplNum}}</span>
            </div>
          </div>
          <div>
            <title-box>
              <div
                slot="titleLight"
                class=""
              ></div>
              <div slot="title">
                <span>维护仪器</span>
              </div>
            </title-box>
            <div class="iconTitle">
              <div id="classify">
                <i>&#xe663;</i>
                <span>城市</span>
              </div>
              <div id="classify">
                <i>&#xe65b;</i>
                <span>仪器</span>
              </div>
            </div>
            <!-- 维护仪器列表 -->
            <div
              class="listContent"
              ref="mainInsList"
            >
              <ul>
                <li
                  v-for="(item,index) in maintainInsList"
                  :key=index
                >
                  <span>{{item.city}}</span>
                  <span>{{item.ecode}}</span>
                </li>

              </ul>

            </div>
          </div>
        </div>
        <div class="centerMap baseStyle">
          <title-box>
            <span slot="title">仪器分布状态图</span>
          </title-box>
          <div
            id="mBox"
            class="mapBox"
          >
          </div>
        </div>
        <div class="rightMaintain baseStyle">
          <title-box>
            <span slot="title">维护日历饼图</span>
          </title-box>
          <div
            id="calendarChart"
            class="calendarBox"
          >
          </div>
        </div>
      </div>
      <div class="bottomContent">
        <div class="leftHalt baseBox">
          <title-box>
            <span slot="title">停机故障</span>
          </title-box>
          <div class="iconTitle">
            <div id="classify">
              <i>&#xe663;</i>
              <span>城市</span>
            </div>
            <div id="classify">
              <i>&#xe65b;</i>
              <span>仪器</span>
            </div>
          </div>
          <div class="listContent">
            <ul>
              <li
                v-for="(item,index) in haltFaultList"
                :key=index
              >
                <span>{{item.city}}</span>
                <span>{{item.eCode}}</span>
              </li>
            </ul>

          </div>
        </div>
        <div class="centerMalfunction baseBox">
          <title-box>
            <span slot="title">近一周故障曲线</span>
          </title-box>
          <div
            id="lineChartBox"
            class="lineChart"
          ></div>

        </div>
        <div class="rightConsume baseBox">
          <title-box>
            <span slot="title">近一周故障等级</span>
          </title-box>
          <div class="barBoxWeekTop">
            <div
              id="barBox3"
              class="barBox3"
            ></div>
          </div>
          <div class="faultTitleBox"><span>三级故障</span></div>
          <div class="barBoxWeek">
            <div
              id="barBox1"
              class="barBox1"
            ></div>
            <div
              id="barBox2"
              class="barBox2"
            ></div>
          </div>
          <div class="faultTitleBox">
            <span>一级故障</span>
            <span>二级故障</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { homeStateTotal } from "@/request/api.js";
import { homeCalendarPie } from "@/request/api.js";
import { homeFaultLine } from "@/request/api.js";
import { homeMaintainIns } from "@/request/api.js";
import { homeHaltFault } from "@/request/api.js";
import { hometodayreagent } from "@/request/api.js";
import { weekFaultClass } from "@/request/api.js";

import titleBox from "@/components/title.vue";
import * as echarts from "echarts";
import "@/assets/map/china.js";
// import "@/assets/map/echarts.min.js";
require("echarts");

export default {
  created() {
    //以下为获取数据接口
    this.homeStateTotal();
    this.homeFaultLine(); //后
    this.homeCalendarPie();
    this.homeMaintainIns();
    this.homeHaltFault();
    this.hometodayreagent();
    // this.showPie1();
    // this.showPie2();
    // this.showPie3();
    this.weekFaultClass();
  },
  mounted() {
    //图表类型页面
    // this.showline();//先
    this.showMap();
  },
  name: "Home",
  components: {
    titleBox,
  },
  data() {
    return {
      startNum: null,
      endNum: null,
      samplNum: null,
      calendarDate: [],
      calendarFullData: [],
      maintainInsList: [],
      haltFaultList: [],
      todayreagent: [],
      faultClass1: [],
      faultClass2: [],
      faultClass3: [],

      faultLineDate: [],
      faultLineType: [],
      faultLineTotalData: [],
      dateScope: "",
    };
  },
  methods: {
    //开机数、样本数、停机数接口
    homeStateTotal() {
      homeStateTotal()
        .then((res) => {
          console.log("开机数、样本数、停机数请求成功", res);
          this.startNum = res.data.rows[0].count;
          this.endNum = res.data.rows[1].count;
          this.samplNum = res.data.rows[2].count;
        })
        .catch((err) => {
          console.log("开机数、样本数、停机数请求失败", err);
        });
    },
    //维护仪器数据接口
    homeMaintainIns() {
      this.maintainInsList = [];
      homeMaintainIns()
        .then((res) => {
          console.log("维护仪器数据接口成功", res);
          if (res.data.success) {
            this.maintainInsList = res.data.rows;
          }
        })
        .catch((err) => {
          console.log("维护仪器数据接口失败", err);
        });
    },
    //停机故障数据接口
    homeHaltFault() {
      this.haltFaultList = [];
      homeHaltFault()
        .then((res) => {
          console.log("停机故障数据接口成功", res);
          if (res.data.success) {
            this.haltFaultList = res.data.rows;
          }
        })
        .catch((err) => {
          console.log("停机故障数据接口失败", err);
        });
    },
    //今日试剂消耗排行接口
    hometodayreagent() {
      this.todayreagent = [];
      hometodayreagent()
        .then((res) => {
          if (res.data.success) {
            this.todayreagent = res.data.rows;
            this.showcRossBar();
          }
          console.log("今日试剂消耗排行请求成功", res);
        })
        .catch((err) => {
          console.log("今日试剂消耗排行请求成功", err);
        });
    },
    //日历饼图
    homeCalendarPie() {
      this.calendarDate = [];
      homeCalendarPie()
        .then((res) => {
          console.log("日历饼图请求成功", res.data.Datas);
          this.calendarFullData = res.data.Datas;
          this.dateScope=res.data.Datas[0].Date.substring(0,7);
          for (var i = 0; i < res.data.Datas.length; i++) {
            this.calendarDate.push(res.data.Datas[i].Date); //日期数据
          }
          this.calendarDate;
          this.showCalendar();
        })
        .catch((err) => {
          console.log("日历饼图请求失败", err);
        });
    },
    //近一周故障等级
    weekFaultClass() {
      weekFaultClass()
        .then((res) => {
          console.log("近一周故障等级接口成功", res);
          this.faultClass1 = res.data.L1;
          this.faultClass2 = res.data.L2;
          this.faultClass3 = res.data.L3;
          this.showPie1();
          this.showPie2();
          this.showPie3();
        })
        .catch((err) => {
          console.log("近一周故障等级接口失败", err);
        });
    },
    //故障曲线图接口
    homeFaultLine() {
      homeFaultLine()
        .then((res) => {
          console.log("近一周故障曲线接口成功", res);

          var F3999 = [];
          var F4000 = [];
          var S6500 = [];
          var i100 = [];

          var faultTotalData = res.data.rows;
          for (var i = 0; i < faultTotalData.length; i++) {
            if (this.faultLineDate.indexOf(faultTotalData[i].date) == -1) {
              this.faultLineDate.push(faultTotalData[i].date);
            }
            if (this.faultLineType.indexOf(faultTotalData[i].type) == -1) {
              //数组中没有当前字符串
              var tempObject = {};
              this.faultLineType.push(faultTotalData[i].type);
              tempObject.types = faultTotalData[i].type;
              this.faultLineTotalData.push(tempObject);
            }
            switch (faultTotalData[i].type) {
              case "F3999":
                F3999.push(faultTotalData[i].total);
                break;
              case "F4000":
                F4000.push(faultTotalData[i].total);
                break;
              case "S6500":
                S6500.push(faultTotalData[i].total);
                break;
              case "i100":
                i100.push(faultTotalData[i].total);
                break;
            }
          }
          this.faultLineTotalData[0].datas = F3999;
          this.faultLineTotalData[1].datas = F4000;
          this.faultLineTotalData[2].datas = S6500;
          this.faultLineTotalData[3].datas = i100;
          this.showline();
        })
        .catch((err) => {
          console.log("故障曲线数据请求成功", err);
        });
    },
    //近一周故障曲线
    showline() {
      var lineChart = this.$echarts.init(
        document.getElementById("lineChartBox"),
        "tellgenChart"
      ); //初始化echarts实例
      var temp = [];
      for (var i = 0; i < this.faultLineTotalData.length; i++) {
        temp.push({
          name: this.faultLineTotalData[i].types,
          type: "line",
          stack: "总量",
          data: this.faultLineTotalData[i].datas,
        });
      }

      var line = {
        legend: {
          data: this.faultLineType,
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "2%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.faultLineDate,
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1rem",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        series: temp,
      };
      lineChart.setOption(line);
      window.onreset = function () {
        window.onresize = lineChar.resize;
      };
    },
    showPie1() {
      var barBox1 = document.getElementById("barBox1");
      var barRank1 = this.$echarts.init(barBox1, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.faultClass1.length; i++) {
        tempData.push({
          value: this.faultClass1[i].total,
          name: this.faultClass1[i].EType,
        });
      }
      var option;
      option = {
        tooltip: {
          trigger: "item",
          position: "right",
          textStyle: {
            fontSize: "1rem",
          },
        },
        series: [
          {
            name: "故障信息",
            type: "pie",
            radius: ["40%", "95%"],
            avoidLabelOverlap: false,

            label: {
              show: true,
              position: "center",
              fontSize: "1.4rem",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: tempData,
          },
        ],
      };
      option && barRank1.setOption(option);
      window.onresize = barRank1.resize;
    },
    showPie2() {
      var barBox2 = document.getElementById("barBox2");
      var barRank1 = this.$echarts.init(barBox2, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.faultClass2.length; i++) {
        tempData.push({
          value: this.faultClass2[i].total,
          name: this.faultClass2[i].EType,
        });
      }
      var option;
      option = {
        tooltip: {
          trigger: "item",
          position: "right",
          textStyle: {
            fontSize: "1rem",
          },
        },
        series: [
          {
            name: "故障信息",
            type: "pie",
            radius: ["45%", "95%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              fontSize: "1.4rem",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: tempData,
          },
        ],
      };
      option && barRank1.setOption(option);
      window.onresize = barRank1.resize;
    },
    showPie3() {
      var barBox3 = document.getElementById("barBox3");
      var barRank1 = this.$echarts.init(barBox3, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.faultClass2.length; i++) {
        tempData.push({
          value: this.faultClass2[i].total,
          name: this.faultClass2[i].EType,
        });
      }
      var option;
      option = {
        tooltip: {
          trigger: "item",
          position: "left",
          textStyle: {
            fontSize: "1rem",
          },
        },
        series: [
          {
            name: "故障信息",
            type: "pie",
            radius: ["45%", "95%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              fontSize: "1.4rem",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: tempData,
          },
        ],
      };
      option && barRank1.setOption(option);
      window.onresize = barRank1.resize;
    },
    //维护日历饼图
    showCalendar() {
      var app = {};

      var chartDom = document.getElementById("calendarChart");
      var myChart = echarts.init(chartDom, "tellgenChart");
      var option;
      console.log("最新日期", this.calendarDate);
      var scatterData = this.calendarDate;//日期数据
      var incomclass = [];//总数据
      for (var s = 0; s < this.calendarFullData.length; s++) {
        incomclass.push([
          { name: "周维护", value: this.calendarFullData[s].W },
          { name: "月维护", value: this.calendarFullData[s].M },
          { name: "季维护", value: this.calendarFullData[s].Q },
        ]);
      }

      function getPieSeries(scatterData, chart) {
        //[[2012-2-13,235],[2012-2-13,235],[2012-2-13,235],]
        return scatterData.map(function (item, index) {
          // item是scatterData数组的每一项['2017-02-3', 7657]，index是每项的索引值
          var center = chart.convertToPixel("calendar", item); //item ==['2017-02-3', 7657],将日期和值转换成像素坐标 center = [237.9085714285714, 158]
          console.log("center是", center);
          var pieData = incomclass[index];
          // [237.9085714285714, 158]
          return {
            id: index + "pie", //index是数组中所有项的索引
            type: "pie",
            center: center, //center是数组中的所有项
            label: {
              normal: {
                formatter: "{c}",
                position: "inside",
              },
            },
            radius: "10%",
            data: pieData,
          };
        });
      }

      function getPieSeriesUpdate(scatterData, chart) {
        return scatterData.map(function (item, index) {
          var center = chart.convertToPixel("calendar", item);
          return {
            id: index + "pie",
            center: center,
          };
        });
      }

      option = {
        title: {},
        tooltip: {
          textStyle: {
            fontSize: "1rem",
          },
        },
        legend: {
          data: ["周维护", "月维护", "季维护"],
          bottom: 20,
          textStyle: {
            color: "#EEEEEE",
            fontSize: "0.9rem",
          },
        },
        calendar: {
          // top: "center",
          left: "3%",
          right: "3%",
          width: "auto",
          height: "auto",
          orient: "vertical",
          itemStyle: {
            color: "#191931",
          },

          yearLabel: {
            show: false,
          },
          monthLabel: {
            show: false,
          },
          dayLabel: {
            show: true,
            margin: 20,
            firstDay: 2,
            color: "#eeeeee",
            fontSize: "1.4rem",
            nameMap: [
              "星期日",
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六",
            ],
          },
          range: this.dateScope,//日期范围
        },
        series: [
          {
            id: "label",
            type: "scatter",
            coordinateSystem: "calendar",
            symbolSize: 1,
            left: "20%",
            label: {
              show: true,
              color: "#eeeeee",
              fontSize: "0",
              formatter: function (params) {
                return echarts.format.formatTime("dd", params.value[0]);
              },
              offset: ["2rem", "2rem"],
            },
            data: scatterData,
          },
        ],
      };

      var pieInitialized;
      setTimeout(function () {
        pieInitialized = true;
        myChart.setOption({
          series: getPieSeries(scatterData, myChart), //myChart是echarts的初始化，scatterData是["2012-03-16",654]
        });
      }, 10);

      app.onresize = function () {
        if (pieInitialized) {
          myChart.setOption({
            series: getPieSeriesUpdate(scatterData, myChart),
          });
        }
      };
      option && myChart.setOption(option);
      window.onresize = myChart.resize;
    },
    //仪器分布状态图（地图）
    showMap() {
      var myChart = echarts.init(document.getElementById("mBox"));
      var cityMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
        招远: [120.38, 37.35],
        舟山: [122.207216, 29.985295],
        齐齐哈尔: [123.97, 47.33],
        盐城: [120.13, 33.38],
        赤峰: [118.87, 42.28],
        青岛: [120.33, 36.07],
        乳山: [121.52, 36.89],
        金昌: [102.188043, 38.520089],
        泉州: [118.58, 24.93],
        莱西: [120.53, 36.86],
        日照: [119.46, 35.42],
        胶南: [119.97, 35.88],
        南通: [121.05, 32.08],
        拉萨: [91.11, 29.97],
        云浮: [112.02, 22.93],
        梅州: [116.1, 24.55],
        文登: [122.05, 37.2],
        上海: [121.48, 31.22],
        攀枝花: [101.718637, 26.582347],
        威海: [122.1, 37.5],
        承德: [117.93, 40.97],
        厦门: [118.1, 24.46],
        汕尾: [115.375279, 22.786211],
        潮州: [116.63, 23.68],
        丹东: [124.37, 40.13],
        太仓: [121.1, 31.45],
        曲靖: [103.79, 25.51],
        烟台: [121.39, 37.52],
        福州: [119.3, 26.08],
        瓦房店: [121.979603, 39.627114],
        即墨: [120.45, 36.38],
        抚顺: [123.97, 41.97],
        玉溪: [102.52, 24.35],
        张家口: [114.87, 40.82],
        阳泉: [113.57, 37.85],
        莱州: [119.942327, 37.177017],
        湖州: [120.1, 30.86],
        汕头: [116.69, 23.39],
        昆山: [120.95, 31.39],
        宁波: [121.56, 29.86],
        湛江: [110.359377, 21.270708],
        揭阳: [116.35, 23.55],
        荣成: [122.41, 37.16],
        连云港: [119.16, 34.59],
        葫芦岛: [120.836932, 40.711052],
        常熟: [120.74, 31.64],
        东莞: [113.75, 23.04],
        河源: [114.68, 23.73],
        淮安: [119.15, 33.5],
        泰州: [119.9, 32.49],
        南宁: [108.33, 22.84],
        营口: [122.18, 40.65],
        惠州: [114.4, 23.09],
        江阴: [120.26, 31.91],
        蓬莱: [120.75, 37.8],
        韶关: [113.62, 24.84],
        嘉峪关: [98.289152, 39.77313],
        广州: [113.23, 23.16],
        延安: [109.47, 36.6],
        太原: [112.53, 37.87],
        清远: [113.01, 23.7],
        中山: [113.38, 22.52],
        昆明: [102.73, 25.04],
        寿光: [118.73, 36.86],
        盘锦: [122.070714, 41.119997],
        长治: [113.08, 36.18],
        深圳: [114.07, 22.62],
        珠海: [113.52, 22.3],
        宿迁: [118.3, 33.96],
        咸阳: [108.72, 34.36],
        铜川: [109.11, 35.09],
        平度: [119.97, 36.77],
        佛山: [113.11, 23.05],
        海口: [110.35, 20.02],
        江门: [113.06, 22.61],
        章丘: [117.53, 36.72],
        肇庆: [112.44, 23.05],
        大连: [121.62, 38.92],
        临汾: [111.5, 36.08],
        吴江: [120.63, 31.16],
        石嘴山: [106.39, 39.04],
        沈阳: [123.38, 41.8],
        苏州: [120.62, 31.32],
        茂名: [110.88, 21.68],
        嘉兴: [120.76, 30.77],
        长春: [125.35, 43.88],
        胶州: [120.03336, 36.264622],
        银川: [106.27, 38.47],
        张家港: [120.555821, 31.875428],
        三门峡: [111.19, 34.76],
        锦州: [121.15, 41.13],
        南昌: [115.89, 28.68],
        柳州: [109.4, 24.33],
        三亚: [109.511909, 18.252847],
        自贡: [104.778442, 29.33903],
        吉林: [126.57, 43.87],
        阳江: [111.95, 21.85],
        泸州: [105.39, 28.91],
        西宁: [101.74, 36.56],
        宜宾: [104.56, 29.77],
        呼和浩特: [111.65, 40.82],
        成都: [104.06, 30.67],
        大同: [113.3, 40.12],
        镇江: [119.44, 32.2],
        桂林: [110.28, 25.29],
        张家界: [110.479191, 29.117096],
        宜兴: [119.82, 31.36],
        北海: [109.12, 21.49],
        西安: [108.95, 34.27],
        金坛: [119.56, 31.74],
        东营: [118.49, 37.46],
        牡丹江: [129.58, 44.6],
        遵义: [106.9, 27.7],
        绍兴: [120.58, 30.01],
        扬州: [119.42, 32.39],
        常州: [119.95, 31.79],
        潍坊: [119.1, 36.62],
        重庆: [106.54, 29.59],
        台州: [121.420757, 28.656386],
        南京: [118.78, 32.04],
        滨州: [118.03, 37.36],
        贵阳: [106.71, 26.57],
        无锡: [120.29, 31.59],
        本溪: [123.73, 41.3],
        克拉玛依: [84.77, 45.59],
        渭南: [109.5, 34.52],
        马鞍山: [118.48, 31.56],
        宝鸡: [107.15, 34.38],
        焦作: [113.21, 35.24],
        句容: [119.16, 31.95],
        北京: [116.46, 39.92],
        徐州: [117.2, 34.26],
        衡水: [115.72, 37.72],
        包头: [110, 40.58],
        绵阳: [104.73, 31.48],
        乌鲁木齐: [87.68, 43.77],
        枣庄: [117.57, 34.86],
        杭州: [120.19, 30.26],
        淄博: [118.05, 36.78],
        鞍山: [122.85, 41.12],
        溧阳: [119.48, 31.43],
        库尔勒: [86.06, 41.68],
        安阳: [114.35, 36.1],
        开封: [114.35, 34.79],
        济南: [117, 36.65],
        德阳: [104.37, 31.13],
        温州: [120.65, 28.01],
        九江: [115.97, 29.71],
        邯郸: [114.47, 36.6],
        临安: [119.72, 30.23],
        兰州: [103.73, 36.03],
        沧州: [116.83, 38.33],
        临沂: [118.35, 35.05],
        南充: [106.110698, 30.837793],
        天津: [117.2, 39.13],
        富阳: [119.95, 30.07],
        泰安: [117.13, 36.18],
        诸暨: [120.23, 29.71],
        郑州: [113.65, 34.76],
        哈尔滨: [126.63, 45.75],
        聊城: [115.97, 36.45],
        芜湖: [118.38, 31.33],
        唐山: [118.02, 39.63],
        平顶山: [113.29, 33.75],
        邢台: [114.48, 37.05],
        德州: [116.29, 37.45],
        济宁: [116.59, 35.38],
        荆州: [112.239741, 30.335165],
        宜昌: [111.3, 30.7],
        义乌: [120.06, 29.32],
        丽水: [119.92, 28.45],
        洛阳: [112.44, 34.7],
        秦皇岛: [119.57, 39.95],
        株洲: [113.16, 27.83],
        石家庄: [114.48, 38.03],
        莱芜: [117.67, 36.19],
        常德: [111.69, 29.05],
        保定: [115.48, 38.85],
        湘潭: [112.91, 27.87],
        金华: [119.64, 29.12],
        岳阳: [113.09, 29.37],
        长沙: [113, 28.21],
        衢州: [118.88, 28.97],
        廊坊: [116.7, 39.53],
        菏泽: [115.480656, 35.23375],
        合肥: [117.27, 31.86],
        武汉: [114.31, 30.52],
        大庆: [125.03, 46.58],
      };

      // 地图配置
      var option = {
        backgroundColor: "#191931",
        title: {
          x: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          show: true,
          formatter: function (params) {
            return params.name + " : " + params.value[2];
          },
          textStyle: {
            fontSize: "1rem",
          },
        },
        geo: {
          show: true,
          map: "china",
          // left: '10%',
          roam: true,
          // center: [115.97, 29.71],
          zoom: "1.2",
          label: {
            show: true,
            color: "#ffffff",
            fontSize: "1.3rem",
            align: "center",
            verticalAlign: "center",
          },
          itemStyle: {
            normal: {
              areaColor: "#555593",
              borderColor: "#341918",
            },
            emphasis: {
              areaColor: "#00ffff",
              show: false,
              label: {
                show: true,
                //  backgroundColor: '#FF0000'
              },
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbolSize: 6,
            nameMap: {
              China: "中国",
            },
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              emphasis: {
                borderColor: "#fff",
                borderWidth: 1,
              },
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: 6,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#f4e925",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            zlevel: 1,
          },
        ],
      };

      myChart.setOption(option);

      myChart.on("click", function (params) {
        console.log(params); //此处写点击事件内容
        console.log(params.name);
      }); //点击事
    },
  },
};
</script>
<style lang="less" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2700101 */
  src: url("//at.alicdn.com/t/font_2700101_g9voad4i2fj.woff2?t=1627279029682")
      format("woff2"),
    url("//at.alicdn.com/t/font_2700101_g9voad4i2fj.woff?t=1627279029682")
      format("woff"),
    url("//at.alicdn.com/t/font_2700101_g9voad4i2fj.ttf?t=1627279029682")
      format("truetype");
}

// .tilteLight {
//   width: 1.8rem;
//   height: 1.8rem;
//   background-color: aqua;
//   border-radius: 50%;
//   margin-right: 1rem;
//   x-shadow: 0 0 0.6rem rgba(220, 233, 233, 0.6);
// }

.homeBox {
  width: 100%;
  height: 102rem; //改代码需要自适应
  margin: 0 auto;
  box-sizing: border-box;

  .tapContent {
    width: 100%;
    height: 58rem;
    display: flex;
    display: -webkit-flex; /* Safari */
    // justify-content: space-around;
    padding: 0 2rem;
    flex-wrap: wrap;

    .baseStyle {
      border-radius: 1.4rem;
      background-color: #191931;
      flex-shrink: 0;
    }
    .leftInstrument {
      flex: 1;
      border: 0.1rem solid #232341;
      flex-shrink: 0;
      .listContent {
        width: 97%;
        height: 34rem;
        margin: 0 auto;
        overflow: AUTO;
        ul {
          width: 99%;
          margin: 0 auto;
          li {
            width: 100%;
            height: 4.2rem;
            background-color: #100f21;
            border: 0.1rem solid #37827e;
            border-radius: 0.6rem;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            box-shadow: 0 0 0.6rem rgba(78, 78, 122, 0.6);
            span {
              flex: 1;
              display: flex;
              justify-content: center;
            }
          }
          li:hover {
            border: 0.12rem solid #01fff5;
            box-shadow: 0 0 0.6rem rgba(84, 255, 255, 0.6);
            color: #01fff5;
          }
        }
      }
      .iconTitle {
        width: 100%;
        height: 5rem;
        display: flex;
        #classify {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            font-family: "iconfont";
            font-style: normal;
            margin-right: 0.6rem;
            font-size: 2rem;
          }
        }
      }
      .in-line {
        width: 100%;
        height: 12rem;
        // background: #ffffff;
        border-bottom: 0.2rem solid #11101e;
        display: flex;
        flex-direction: column;
        .topLightBox {
          flex: 1.2;
          display: flex;
          .topLignt {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 1.4rem;
            .lightgreen {
              width: 2rem;
              height: 2rem;
              background-color: #18f921;
              box-shadow: 0 0 0.6rem rgba(160, 238, 160, 0.6);
              border-radius: 50%;
              display: inline-block;
              margin: 0 1rem 0 2rem;
            }
            .redBox {
              background-color: #ff488a;
              box-shadow: 0 0 0.6rem rgba(245, 187, 209, 0.6);
            }
          }
          .rightLignt {
            flex: 1;
          }
        }
        .botLightBox {
          flex: 1;
          display: flex;
          padding-top: 1.2rem;
          font-size: 1.4rem;
          .lightblue {
            width: 2rem;
            height: 2rem;
            background-color: #07fbf9;
            box-shadow: 0 0 0.6rem rgba(186, 245, 245, 0.6);

            border-radius: 50%;
            display: inline-block;
            margin: 0 1rem 0 2rem;
          }
        }
      }
    }
    .centerMap {
      flex: 2;
      height: 100%;
      margin: 0 2rem;
      border: 0.1rem solid #232341;
      .mapBox {
        width: 100%;
        height: 52rem;
      }
    }
    .rightMaintain {
      flex: 1.2;
      border: 0.1rem solid #232341;
      .calendarBox {
        width: 96%;
        height: 52rem;
      }
    }
  }
  .bottomContent {
    // background-color: rgb(73, 57, 57);
    width: 100%;
    height: 42rem;
    display: flex;
    display: -webkit-flex; /* Safari */
    padding: 0 2rem;
    justify-content: space-around;
    margin-top: 1.4rem;

    .baseBox {
      background-color: #191931;
      border-radius: 1.4rem;
      border: 0.1rem solid #232341;
    }
    .leftHalt {
      flex: 1;
      overflow: hidden;
      .listContent {
        width: 97%;
        height: 34rem;
        margin: 0 auto;
        overflow: hidden;
        ul {
          width: 99%;
          margin: 0 auto;
          li {
            width: 100%;
            height: 4.2rem;
            background-color: #100f21;
            border: 0.1rem solid #f11360;
            border-radius: 0.6rem;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            box-shadow: 0 0 0.6rem rgba(78, 78, 122, 0.6);
            span {
              flex: 1;
              display: flex;
              justify-content: center;
            }
          }
          li:hover {
            border: 0.12rem solid #ff9fcf;
            box-shadow: 0 0 0.6rem rgba(255, 170, 213, 0.6);
            color: #ff9fcf;
          }
        }
      }
      .iconTitle {
        width: 100%;
        height: 5rem;
        display: flex;
        #classify {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          i {
            font-family: "iconfont";
            font-style: normal;
            margin-right: 0.6rem;
            font-size: 2rem;
          }
        }
      }
    }
    .centerMalfunction {
      flex: 2;
      margin: 0 2rem;
      .lineChart {
        width: 100%;
        height: 36rem;
      }
    }
    .rightConsume {
      flex: 1.2;
      .barBoxWeek {
        width: 100%;
        height: 15rem;
        display: flex;
        .barBox1 {
          flex: 1;
        }
        .barBox2 {
          flex: 1;
        }
      }
      .faultTitleBox {
        width: 100%;
        height: 2.4rem;
        z-index: 1000;
        display: flex;
        justify-content: center;
        span {
          flex: 1;
          text-align: center;
        }
      }
      .barBoxWeekTop {
        width: 100%;
        height: 15rem;
        .barBox3 {
          width: 30rem;
          height: 100%;
          margin: 0 auto;
        }
      }
      .barBox {
        width: 100%;
        height: 36rem;
      }
    }
  }
}
</style>
